<template>
  <div class="datepicker">
    <input :value="value" @click.stop="flag=true"/>
    <div class="datepicker-box" v-show="flag">
      <div class="box-header">
        <div class="header-left" @click.stop="prev">上</div>
        <div class="header-middle">{{ dateStr }}</div>
        <div class="header-right" @click.stop="next">下</div>
      </div>
      <div class="box-th">
        <div class="box-item">一</div>
        <div class="box-item">二</div>
        <div class="box-item">三</div>
        <div class="box-item">四</div>
        <div class="box-item">五</div>
        <div class="box-item">六</div>
        <div class="box-item">日</div>
      </div>
      <div class="box-content">
        <div class="box-item" :class="item.className" v-for="(item, index) in info.list" :key="index" @click="getDate(item)">
          {{ item.i }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref,onMounted } from 'vue'
let value  = ref("");//时间
let flag  = ref(false);//显示的状态
let date = new Date() //默认当前的时间
let info = reactive({
  list: []
})
let dateStr = ref('')

let prev = () => {
  date.setMonth(date.getMonth() - 1)
  createDate()
}
let next = () => {
  date.setMonth(date.getMonth() + 1)
  createDate()
}
let createDate = () => {
  dateStr.value = date.format('yyyy年mm月')

  let currentMonthDays = date.getCurrentMonthDays()
  //当前月有多少天
  let prevMonthDays = date.getPrevMonthDays()
  //上一个月有多少天
  let firstDayWeek = date.getCurrentMonthFirstDayWeek()
  //一号是星期几
  firstDayWeek = firstDayWeek == 0 ? 7 : firstDayWeek

  info.list = [] //清空
  //上一个月
  for (let i = prevMonthDays - firstDayWeek + 2; i <= prevMonthDays; i++) {
    let tempDate = new Date('2000-01-01')
    tempDate.setFullYear(date.getFullYear())
    tempDate.setMonth(date.getMonth() - 1)
    tempDate.setDate(i)
    info.list.push({
      date: tempDate,
      str: tempDate.format('yyyy-mm-dd'),
      className: 'prev',
      i
    })
  }
  //当前月
  for (let i = 1; i <= currentMonthDays; i++) {
    let tempDate = new Date('2000-01-01')
    tempDate.setFullYear(date.getFullYear())
    tempDate.setMonth(date.getMonth())
    tempDate.setDate(i)
    info.list.push({
      date: tempDate,
      str: tempDate.format('yyyy-mm-dd'),
      className: 'current',
      i
    })
  }
  //下一个月
  for (let i = 1; i <= 42 - currentMonthDays - firstDayWeek + 1; i++) {
    let tempDate = new Date('2000-01-01')
    tempDate.setFullYear(date.getFullYear())
    tempDate.setMonth(date.getMonth() + 1)
    tempDate.setDate(i)
    info.list.push({
      date: tempDate,
      str: tempDate.format('yyyy-mm-dd'),
      className: 'next',
      i
    })
  }
}

createDate()

let getDate = (item)=>{
   value.value  = item.str;
   flag.value = false;
}

onMounted(()=>{
   document.addEventListener("click",()=>{
        flag.value = false;
   })
})
</script>

<style scoped>
.datepicker {
  position: relative;
  height: 40px;
  width: 280px;
}
.datepicker-box {
  position: absolute;
  left: 0;
  top: 40px;
  width: 280px;
  background-color: black;
  color: aliceblue;
}
.box-header {
  width: 100%;
  display: flex;
}
.box-header .header-left {
  flex: 1;
  text-align: center;
}
.box-header .header-middle {
  flex: 4;
  text-align: center;
}
.box-header .header-right {
  flex: 1;
  text-align: center;
}
.box-item {
  float: left;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.next{
    color:red !important
}
.prev{
    color:yellow !important
}
</style>
